<template>
	<div class="block">
		<el-row :gutter="20" class="erow"
			v-for="(row,index) in sliceList(list,4)" :key="index">
		  <el-col :span="6"
				v-for="(item,i) in row" :key="i"
							@click.native="ClickItem(item)">
				<el-image :src="item.file_url" class="img"></el-image>
				<span class="tag">{{item.file_type}}</span>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: "ShowVideos",
		props: {
			list: []
		},
		computed: {
			sliceList() {
				return function(data, count) {
					if (data != undefined) {
						let index = 0;
						let arrTemp = [];
						for (let i = 0; i < data.length; i++) {
							index = parseInt(i / count);
							if (arrTemp.length <= index) {
								arrTemp.push([]);
							}
							arrTemp[index].push(data[i])
						}
						return arrTemp
					}
				}
			}
		},
		methods: {
			ClickItem(item) {
				window.open(item.file_url, "_blank");
			}
		}
	}
</script>

<style scoped="scoped">
	.erow{
		width: 100%;
	}

	.block {
		/* display: flex; */
		margin: 0 auto;
		width: 80%;
	}


	.img {
		padding: 0;
		margin: 0;
		height: 150px;
		width: 100%;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
